<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
    <mdl-layout-header>
        <mdl-layout-header-row>
        </mdl-layout-header-row>
    </mdl-layout-header>
    <mdl-layout-content>
        <!--登录窗口-->
        <form [formGroup]="form">
            <div class="title-img"></div>
            <mdl-card mdl-shadow="24">
                <mdl-card-title>
                    <div>账号登录</div>
                </mdl-card-title>
                <mdl-card-supporting-text>
                    <div class="ui-g ui-fluid">
                        <div class="ui-g-12 ui-md-4" style="width:100%;">
                            <div class="ui-inputgroup">
                                <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
                                <input type="text" formControlName="username" pInputText placeholder="请输入您的账号"
                                    style="width:100%">
                            </div>
                        </div>
                    </div>
                    <div class="ui-g ui-fluid">
                        <div class="ui-g-12 ui-md-4" style="width:100%;">
                            <div class="ui-inputgroup">
                                <span class="ui-inputgroup-addon"><i class="fa fa-lock"></i></span>
                                <input type="password" formControlName="password" pPassword  placeholder="请输入您的密码"
                                    style="width:100%" [feedback]="false" (keypress)="$event.charCode==13?login():0">
                            </div>
                        </div>
                    </div>
                    <div class="ui-g ui-fluid">
                        <div class="ui-g-6 ui-md-6 rememberme">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> 自动登录
                                </label>
                            </div>
                        </div>
                        <div class="ui-g-6 ui-md-6 forget-password">忘记密码？</div>
                    </div>
                    <div class="ui-g ui-fluid" *ngIf="statusMessage.length > 0">
                        <mdl-spinner [active]="processingLogin"></mdl-spinner>
                        <div class="status-info">
                            <ng-container *ngIf="processingLogin">{{statusMessage}}</ng-container>
                            <ng-container *ngIf="!processingLogin"><span style='color:red'>{{statusMessage}}</span></ng-container>
                        </div>
                    </div>
                </mdl-card-supporting-text>
                <mdl-card-actions mdl-card-border>
                    <button type="button" mdl-button (click)="login()" [disabled]="!form.valid || processingLogin"
                        mdl-button-type="raised" mdl-colored="primary" mdl-ripple>登录</button>
                </mdl-card-actions>
                <mdl-card-menu>
                </mdl-card-menu>
            </mdl-card>
        </form>
        <div class="footer">
            <span></span>
        </div>
    </mdl-layout-content>
</mdl-layout>
